<template>
	<view>
		<view class="video-item">
			<view class="video">
				<video
					:autoplay="true"
					:src="video.video_url"  
					class="comm"
					object-fit="contain"
					:show-center-play-btn="true"
					play-btn-position="bottom"
					:enable-play-gesture="true"
					:show-mute-btn="true"
					:muted="false"
				></video>
			</view>
			
			<view class="segmented-control">
				<view class="index-title-item">
					<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
						activeColor="#ff6d9f"></uni-segmented-control>
				</view>
			</view>
			
			<!-- 内容 -->
			<view class="content">
				<view v-show="current === 0">
					<view class="jianjie">
						<view class="user">
							<view class="user-img">
								<image :src="video.user_img"></image>
							</view>
							<view class="user-name">{{video.user_name}}</view>
							<view class="isguanzhu"><text class="iconfont icon-tianjia"></text>关注</view>
						</view>
						<view class="title">{{video.title}}</view>
						<view class="handle">
							<view class="handle-item">
								<view class="iconfont icon-like-full"></view>
								<view>{{video.shoucang}}</view>
							</view>
							<view class="handle-item">
								<view class="iconfont icon-badreview-full"></view>
								<view>{{video.zhuanfa}}</view>
							</view>
							<view class="handle-item">
								<view class="iconfont icon-shoucang1"></view>
								<view>收藏</view>
							</view>
							<view class="handle-item">
								<view class="iconfont icon-zhuanfa00"></view>
								<view>转发</view>
							</view>
						</view>
					</view>
				</view>
				<view v-show="current === 1">
					<view class="send-pinglun">
						<!-- placeholder-style适合设置颜色，placeholder-class适合设置字体 -->
						<input type="text" 
							placeholder="发表一条友善的评论" 
							placeholder-style="color: #999" placeholder-class="input-placeholder"></input>
						<view class="sub">发表</view>
					</view>
					<scroll-view scroll-y="true" :scroll-view="false">
						<view class="rec-pinglun" v-for="item in list" :key="item.id">
							<view class="user-img">
								<image :src="item.user_img"></image>
							</view>
							
							<view class="pinglun-info">
								<view class="user-name">{{item.name}}</view>
								<view class="time">{{item.time}}</view>
								<view class="pinglun">{{item.content}}</view>
								<view class="handle">
									<view>
										<text class="iconfont icon-xihuan"></text>
										<text class="num">{{item.xihuan}}</text>
									</view>
									<view>
										<text class="iconfont icon-buxihuan"></text>
										<text class="num">{{item.buxihuan}}</text>
									</view>
									<view class="iconfont icon-zhuanfa1"></view>
									<view class="iconfont icon-pinglun2"></view>
								</view>
							</view>
						</view>
					</scroll-view>
					
					<view class="footer"></view>
					
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: ['简介', '评论'],
				current: 0,
				list: [
					{
						"id": 1,
						"name": "浮生未歇",
						"user_img": "https://www.laijunlin.xyz/static/home/userpic/1.jpg",
						"content": "2022“好评中国”网络评论大赛正式启动， 期待大家踊跃参加！",
						"xihuan": 343,
						"buxihuan": 22,
						"zhuanfa": 343,
						"time": "4-26"
					},
					{
						"id": 2,
						"name": "丝雨如愁",
						"user_img": "https://www.laijunlin.xyz/static/home/userpic/2.jpg",
						"content": "新时代呼唤新作为 新征程谱写新篇章。",
						"xihuan": 243,
						"buxihuan": 12,
						"zhuanfa": 343,
						"time": "4-25"
					},
					{
						"id": 3,
						"name": "如颖随行",
						"user_img": "https://www.laijunlin.xyz/static/home/userpic/3.jpg",
						"content": "新时代呼唤新作为，新征程谱写新篇章，2022“好评中国”网络评论大赛正式启动！",
						"xihuan": 565,
						"buxihuan": 23,
						"zhuanfa": 343,
						"time": "4-24"
					},{
						"id": 4,
						"name": "烟火启橙",
						"user_img": "https://www.laijunlin.xyz/static/home/userpic/4.jpg",
						"content": "传播网络正能量 弘扬时代主旋律 预祝“好评中国”网络评论大赛圆满成功！",
						"xihuan": 656,
						"buxihuan": 25,
						"zhuanfa": 343,
						"time": "4-24"
					},
					{
						"id": 5,
						"name": "各自生欢",
						"user_img": "https://www.laijunlin.xyz/static/home/userpic/5.jpg",
						"content": "祝愿“新时代 新征程 新青年”为主题的2022好评中国网络评论大赛，圆满成功 。",
						"xihuan": 678,
						"buxihuan": 31,
						"zhuanfa": 343,
						"time": "4-23"
					}
				],
				video: []
			}
		},
		methods: {
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			}
		},
		onLoad(options) {
			const res = uni.getSystemInfoSync();
			
			this.current = options.c>>>0
			
			this.video = getApp().globalData.i_video
		}
	}
</script>

<style scoped lang="scss">

	.send-pinglun {
		display: flex;
		width: 100%;
		height: 60rpx;
		padding: 0 30rpx;
		border-radius: 30rpx;
		box-sizing: border-box;
		background-color: #edebee;
		
		input {
			background-color: #edebee;
			width: 100%;
			height: 60rpx;
			border-radius: 30rpx;
			padding-left: 30rpx;
			box-sizing: border-box;
			color: #666;
		}
		
		/deep/ .input-placeholder {
			font-size: 26rpx;
		}
		
		.sub {
			width: 120rpx;
			line-height: 60rpx;
			text-align: center;
			font-size: 30rpx;
			color: #999;
		}
	}
	
	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 30rpx;
		background-color: #fff;
	}

	.video-item {
		.video {
			width: 100%;
			video {
				width: 100%;
				height: 450rpx;
				vertical-align: middle;
			}
		}
		.segmented-control {
			width: 100%;
			.index-title-item {
				color: #999;
			}
		}
		.content {
			padding: 30rpx 30rpx 0 20rpx;
			box-sizing: border-box;
			
			scroll-view {
				width: 100%;
				padding-top: 20rpx;
				// padding-bottom: 60rpx;
				height: calc(100vh - 662rpx);
				/deep/::-webkit-scrollbar {
				
				  display: none;
				
				  width: 0;
				
				  height: 0;
				
				  color: transparent;
				
				  background: transparent;
				
				}
			}
			
			.jianjie {
				.user {
					display: flex;
					align-items: center;
					width: 100%;
					height: 80rpx;
					.user-img {
						image {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
						}
					}
					.user-name {
						font-size: 32rpx;
						color: #ff6d9f;
						margin-left: 30rpx;
					}
					.isguanzhu {
						background-color: #ff6d9f;
						color: #fff;
						height: 40rpx;
						font-size: 26rpx;
						margin-left: auto;
						margin-right: 60;
						padding: 6rpx 20rpx;
						border-radius: 5rpx;
						.iconfont {
							vertical-align: bottom;
							margin-right: 6rpx;
						}
					}
				}
				.title {
					font-size: 32rpx;
					margin-top: 30rpx;
					line-height: 44rpx;
					margin-bottom: 30rpx;
					font-family: "Microsoft YaHei";
				}
				.handle {
					display: flex;
					justify-content: space-around;
					align-items: center;
					width: 100%;
					height: 160rpx;
					.handle-item {
						text-align: center;
						font-size: 24rpx;
						color: #999;
						.iconfont {
							font-size: 60rpx;
							margin-bottom: 16rpx;
						}
						.icon-like-full, .icon-badreview-full {
							font-size: 50rpx;
						}
					}
				}
			}
			
			.rec-pinglun {
				padding-left: 20rpx;
				display: flex;
				box-sizing: border-box;
				margin-bottom: 30rpx;
				border-bottom: 1px solid #edebee;
				.user-img {
					width: 80rpx;
					height: 80rpx;
					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
						vertical-align: middle;
					}
				}
				
				.pinglun-info {
					flex: 1;
					margin-left: 16rpx;
					.user-name {
						color: #ff6d9f;
						font-size: 32rpx;
					}
					.time {
						color: #999;
						font-size: 24rpx;
						margin: 16rpx 0;
					}
					.pinglun {
						font-size: 30rpx;
						line-height: 45rpx;
					}
					.handle {
						color: #999;
						display: flex;
						align-items: center;
						margin-top: 16rpx;
						margin-bottom: 30rpx;
						
						view {
							margin-right: 30rpx;
							font-size: 32rpx;
							.num {
								margin-left: 10rpx;
							}
						}
						
						.icon-xihuan, .icon-buxihuan {
							font-size: 28rpx;
						}
					}
				}
			}
		}
	}

</style>
